<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
    <script src="/js/vue-2.5.17.js"></script>
    <script>
        window.onload = function () {
            new Vue({
                //表示在此id的标签下将要进行的操作,其他外部标签不受影响
                el: "#app",
                data: {
                    //定义属性变量
                    message: "hello vue !",
                    inserthtml: "<h4>v-html指令,直接插入html代码</h4>",
                    ischange: false,
                    ok: true,
                    msg: "user,name,admin",
                    id: 1,
                    url: "http://www.baidu.com/",
                    target: "_blank"
                },
                //定义方法
                methods: {
                    doSomething: function () {
                        this.message = "点击改变了你的值,抱歉!";
                        alert("v-on:click指令使用")
                    }
                },
                //定义过滤器
                filters: {
                    toUpCase: function (value) {
                        if (value == null) return "过滤器操作时入参为空!";
                        value = value.toString();
                        return value.toLocaleUpperCase()
                    },
                    appendTest: function (value) {
                        if (value == null) return "过滤器操作时入参为空2!";
                        value = value.toString()
                        return value + " 过滤器可以串联使用噢!"
                    }
                }
            });
            //属性可以定义为json格式进行传输
            var data = {username: "zyb", addr: "广东省深圳特区",sites:[{name:"张飞"},{name:"关羽"},{name:"刘备"},{name:"三兄弟"}]
                        ,persion:{username:"张飞",age:"关羽",addr:"刘备",emil:"三兄弟"}};
            var vm = new Vue({
                //表示在此id的标签下将要进行的操作,其他外部标签不受影响
                el: "#vue_det",
                data: data,
                methods: {
                    getReturn: function () {
                        return this.username + " - 机会总是给有准备的人...";
                    }
                }
            })
            // 它们引用相同的对象！
            console.log("vm中的属性和data中的属性是否相等: " + (vm.username === data.username));
            //改变原来属性的值,会同时改变
            vm.addr = "上海闵行区";
            console.log(vm.addr + "___" + data.addr);
            data.addr = "浙江省杭州市";
            console.log(vm.addr + "___" + data.addr);
            console.log(vm.$el === document.getElementById("vue_det"));
            console.log(vm.$data === data)

        }
    </script>
</head>
<style>
    .changeclass {
        background: #444;
        color: #eee;
    }
</style>
<body>
<div id="app">
    <!--绑定html属性-->
    <label for="ch">修改颜色</label>
    <!--v-model为双向引用-->
    <input type="checkbox" id="ch" v-model="ischange"><br><br>
    <div v-bind:class="{'changeclass':ischange}">
        v-bind: class指令,是否应用指定的class属性
    </div>
    <!--绑定html属性,此指令太常用了,也支持缩写-->
    <pre><a v-bind:href="url" v-bind:target="target">菜鸟网络</a></pre>
    <pre><a :href="url" v-bind:target="target">缩写指令,百度网址越来越垃圾了</a></pre>
    <!--判断,if_else -->
    <h4 v-if="ischange">你可以看到我呢?</h4>
    <h4 v-else>你不可以看到我呢?</h4>
    <!--v-shou根据条件展示信息-->
    <h4 v-show="ischange">
        v-shou根据条件展示信息
    </h4>


    <!--点击,此指令太常用了,也支持缩写-->
    <button v-on:click="doSomething()">v-on:click指令使用</button>
    <br><br>
    <button @click="doSomething()">缩写指令,v-on:click指令使用</button>
    <hr>
    <!--运算-->
    {{5+9995}}<br><br>
    {{ok ? "真的" : "假的"}}<br><br>
    {{msg.split(',').reverse().join('-')}}<br><br>
    <div v-bind:id="'list-'+id">菜鸟教程</div>
    <br>
    <hr>
    <div v-html="inserthtml"></div>
    <!--直接获取定义的值-->
    <p>{{message}}</p>
    <!--vue的过滤器作用,把字符串变成全部大写-->
    <p>{{message | toUpCase() | appendTest()}}</p>
</div>
<hr>
<div id="vue_det">
    <h4>username: {{username}}</h4>
    <!--数据的双向绑定,当input的值改变了,则username的值也改变了-->
    <input v-model="username">
    <h4>addr: {{addr}}</h4>
    <!--调用方法,并返回方法返回值-->
    <h4>方法返回值: {{getReturn()}}</h4>
    <!--if else-if else使用-->
    <h4 v-if="username === 'zyb'">
        zyb
    </h4>
    <h4 v-else-if="username === 'zyb1'">
        zyb1
    </h4>
    <h4 v-else-if="username === 'zyb2'">
        zyb2
    </h4>
    <h4 v-else-if="username === 'zyb3'">
        zyb3
    </h4>
    <h4 v-else>
        zyb4
    </h4>
    <!--v-for 的循环-->
    <ul>
        <!--遍历数组-->
        <li v-for="site in sites">
            {{site.name}}
        </li>
        <hr>
        <!--迭代json字符串-->
        <li v-for="value in persion">
            {{value}}
        </li>
        <hr>
        <!--迭代json字符串的key,value-->
        <li v-for="(value,key) in persion">
            {{key}} : {{value}}
        </li>
        <hr>
        <!--迭代json字符串的key,value-->
        <li v-for="(value,key,index) in persion">
            {{key}} : {{value}} : {{index}}
        </li>
        <hr>
        <!--迭代整数-->
        <li v-for="n in 5">
            {{n}}
        </li>
    </ul>
    <hr>
</div>
</body>
</html>